<style lang="scss" scoped>
@import "@/assets/css/variable";
.applyActivity {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .base-info {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    .prizeBoxBox {
      padding-left: 10px;
      padding-right: 10px;
      .prizeBox {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border: 1px solid $border-c;
        border-radius: 6px;
        box-sizing: border-box;
        box-shadow: 1px 1px 2px #b9b9b9 !important;
        position: relative;
        .close-icon {
          position: absolute;
          width: 2rem;
          height: 2rem;
          right: -0.7rem;
          top: -0.7rem;
          border-radius: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2;
        }
        &:after {
          position: absolute;
          box-sizing: border-box;
          content: " ";
          pointer-events: none;
          right: 16px;
          bottom: 0;
          left: 16px;
          border-bottom: 1px solid #ebedf0;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
        }
        .label {
          padding-top: 1rem;
          padding-left: 1.6rem;
          position: relative;
          font-size: 1.4rem;
          color: #646566;
          padding-bottom: 1.2rem;
          &:after {
            content: "*";
            color: red;
            position: absolute;
            left: 0.8rem;
          }
        }
        .my-img {
          margin-left: 1rem;
          width: 60%;
          box-sizing: border-box;
          position: relative;
          box-sizing: border-box;
          img {
            width: 100%;
            object-fit: fill;
          }
          .change-pic {
            position: absolute;
            width: 100%;
            height: 2.8rem;
            right: 0rem;
            bottom: 0.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba($color: #000000, $alpha: 0.7);
            color: white;
            font-size: 1.2rem;
            box-sizing: border-box;
          }
        }
      }
    }

    .tip4help {
      padding-left: 9px;
      padding-top: 10px;
      color: red;
    }
  }
  .title-box {
    padding: 1.8rem 1.6rem;
    display: flex;
    .left-line {
      flex: 0 0 0.3rem;
    }
    .title {
      padding-left: 0.5rem;
      font-size: 1.5rem;
      padding-bottom: 0 !important;
    }
  }
  .fix-bottom {
    position: fixed;
    bottom: 1rem;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 3;
    box-sizing: border-box;
  }
  .van-field {
    position: relative;
    .m-colorPicker {
      width: 50px;
      position: absolute;
      top: 5px;
      left: 0;
    }
  }
}
.van-button__text {
  font-size: 1.4rem !important;
}
.van-field__error-message {
  text-align: right !important;
}

.introduce-title-text {
  text-align: center;
  font-size: 1.1rem;
  span {
    color: blue;
  }
}
</style>
<template>
  <div class="applyActivity">
    <div class="title-box">
      <span
        class="left-line"
        :style="{ backgroundColor: $store.getters.getMainColor }"
      ></span>
      <span class="title">助力模板</span>
    </div>
    <div class="base-info padding-lr">
      <van-form>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          required
          v-model="form.title"
          label="活动名称"
          placeholder="请填写活动名称"
          input-align="right"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <div class="field-box">
          <div class="label">
            活动封面
            <span class="tip fs-12 color-s">建议上传比例为4:3的图片</span>
          </div>
          <!-- <van-uploader v-model="form.cover" max-count="1" :before-read="beforeRead" :after-read="afterRead" :max-size="1000 * 1024" @oversize="onOversize"/> -->
          <div class="my-img">
            <!-- <img :src="form.cover" alt=""> -->
            <van-image :src="form.cover" fit="cover" style="width: 100%" />
            <span class="change-pic" @click="changePic">{{
              form.cover ? "更换图片" : "上传图片"
            }}</span>
            <input
              type="file"
              class="file-input d-none"
              ref="fileInput"
              @change="handleFileChange"
            />
          </div>
        </div>

        <van-cell
          title="活动开始时间"
          is-link
          :value="form.start_time"
          @click="showStartTimePopup = true"
          required
          label-width="90"
        />
        <van-cell
          title="活动截止时间"
          is-link
          :value="form.end_time"
          @click="showEndTimePopup = true"
          required
          label-width="90"
        />
      </van-form>
    </div>
    <div class="base-info padding-lr margT-l">
      <van-form>
        <!-- 通过 pattern 进行正则校验 -->

        <van-field
          name="switch"
          label="颜色主题"
          label-width="7rem"
          required
          class="van_field"
          readonly
        >
          <template #right-icon>
            <colorPicker
              v-model="form.theme_color"
              @change="headleChangeColor"
            ></colorPicker>
          </template>
        </van-field>

        <van-field
          name="switch"
          label="按钮颜色"
          label-width="7rem"
          required
          class="van_field"
          readonly
        >
          <template #right-icon>
            <colorPicker
              v-model="form.btn_color"
              @change="headleChangebtnColor"
            ></colorPicker>
          </template>
        </van-field>

        <van-field
          label="背景音乐"
          @click="changeMusic"
          v-model="form.musicName"
          input-align="right"
          readonly
          clearable
          label-width="10rem"
          placeholder="请选择"
        />

        <van-action-sheet
          v-model="showMusic"
          :actions="musicList"
          @select="onMusic"
        />
        <van-field
          required
          v-model="form.sharetitle"
          label="分享标题"
          placeholder="微信中分享后所显示的标题"
          input-align="right"
        />
        <div class="field-box">
          <div class="label">
            分享缩略图
            <span class="tip fs-12 color-s">建议上传比例为4:3的图片</span>
          </div>
          <!-- <van-uploader v-model="form.cover" max-count="1" :before-read="beforeRead" :after-read="afterRead" :max-size="1000 * 1024" @oversize="onOversize"/> -->
          <div class="my-img">
            <!-- <img :src="form.cover" alt=""> -->
            <van-image :src="form.shareimg" fit="scale-down" />
            <span class="change-pic" @click="changePic4shareimg">更换图片</span>
            <input
              type="file"
              class="file-input d-none"
              ref="fileInput4shareimg"
              @change="handleFileChange4shareimg"
            />
          </div>
        </div>
        <van-field
          required
          v-model="form.share_describe"
          label="分享描述"
          type="textarea"
          autosize
          rows="5"
          placeholder="微信中分享活动后所显示的描述"
          input-align="right"
        />
      </van-form>
    </div>
    <div class="introduce padding-all-l margT-l">
      <h2 class="introduce-title t-bold">活动介绍</h2>
      <div v-for="(item, index) in form.introduce" :key="Number(item.id)">
        <my-text
          v-if="item.type === 'text'"
          class="margT-l"
          :editorHtml="item.value"
          :id="Number(item.id)"
          :index="index"
          @editorHtmlChange="editorHtmlChange"
          @deleteIntroduceItem="deleteIntroduceItem"
          @downIntroduceItem="downIntroduceItem"
          @upIntroduceItem="upIntroduceItem"
        >
        </my-text>
        <!-- <my-img
          v-if="item.type === 'img' && item.value"
          class="margT-l"
          :value="item.value"
          :id="Number(item.id)"
          :index="index"
          @ChangeFile="ChangeFile"
          @deleteIntroduceItem="deleteIntroduceItem"
          @downIntroduceItem="downIntroduceItem"
          @upIntroduceItem="upIntroduceItem"
        >
        </my-img> -->
      </div>
      <div class="btnAddSomeBox margT-l">
        <div class="addSome">
          <van-button size="small" type="default" block @click="addTextBtn"
            >添加富文本</van-button
          >
        </div>
        <!-- <div class="interval"></div>
        <div class="addSome">
          <van-button size="small" type="default" block @click="addPicBtn"
            >添加图片{{ imgNum }}/10</van-button
          >
          <input
            type="file"
            class="file-input d-none"
            ref="addPicInput"
            @change="addPicInputChange"
          />
        </div> -->
      </div>
    </div>

    <div class="base-info padding-lr margT-l">
      <van-field
        label="普通价格"
        required
        v-model="form.price"
        input-align="right"
        clearable
        label-width="9rem"
        placeholder="填写普通价格"
        v-show="form.is_plays"
      />

      <van-field
        label="活动价格"
        required
        v-model="form.active_price"
        input-align="right"
        clearable
        label-width="9rem"
        placeholder="填写活动价格"
        v-show="form.is_plays"
      />

      <van-field
        label="商品库存"
        required
        v-model="form.goods_num"
        input-align="right"
        clearable
        label-width="9rem"
        placeholder="填写商品库存"
        v-show="form.is_plays"
      />
      <!-- <van-field
        label="发起助力次数"
        required
        v-model="form.init_help_nums"
        input-align="right"
        clearable
        label-width="9rem"
        placeholder="请输入发起人当前活动可助力次数"
      /> -->
      <van-field
        label="参与助力次数"
        required
        v-model="form.part_help_nums"
        input-align="right"
        clearable
        label-width="9rem"
        placeholder="请输入参与人当前活动可助力次数"
      />

      <van-field
        label="活动按钮字段"
        required
        v-model="form.active_title"
        input-align="right"
        clearable
        label-width="9rem"
        placeholder="活动按钮字段"
      />

      <van-field
        name="switch"
        label="订单类型"
        label-width="13rem"
        required
        readonly
      >
        <template #right-icon>
          <van-radio-group
            v-model="form.commodity_type"
            direction="horizontal"
            @change="orderChange"
          >
            <van-radio name="1">自提</van-radio>
            <van-radio name="2">发货</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        name="switch"
        label="是否开启支付"
        label-width="12rem"
        required
        readonly
      >
        <template #right-icon>
          <van-switch v-model="form.is_plays" size="20" @change="changePlays" />
        </template>
      </van-field>

      <van-field
        name="switch"
        label="是否开启助力排行榜"
        label-width="12rem"
        required
        readonly
      >
        <template #right-icon>
          <van-switch v-model="form.is_helps" size="20" />
        </template>
      </van-field>

      <van-field
        name="switch"
        label="是否开启退款"
        label-width="12rem"
        required
        readonly
      >
        <template #right-icon>
          <van-switch v-model="form.is_refund" size="20" />
        </template>
      </van-field>

      <van-field
        name="switch"
        label="是否开启广告链接"
        label-width="12rem"
        required
        readonly
      >
        <template #right-icon>
          <van-switch v-model="form.is_links" size="20" @change="changeLinks" />
        </template>
      </van-field>

      <van-field
        label="网址链接"
        required
        v-model="form.link_title"
        input-align="right"
        clearable
        label-width="9rem"
        placeholder="弹窗要跳往的链接地址"
        v-if="form.is_links"
      />

      <van-field
        label="弹窗图片(建议上传比例为4:3的图片)"
        input-align="right"
        label-width="60%"
        v-if="form.is_links"
      >
        <template #input>
          <!-- //(file,item,index) -->
          <van-uploader
            v-model="form.upimg"
            max-count="1"
            :after-read="afterRead4prize1"
          />
        </template>
      </van-field>

      <van-field
        name="switch"
        label="是否开启助力时间"
        label-width="12rem"
        required
        readonly
      >
        <template #right-icon>
          <van-switch v-model="form.is_time" size="20" @change="changeItem" />
        </template>
      </van-field>

      <van-field
        label="助力时间"
        required
        v-model="form.bargain_time"
        input-align="right"
        clearable
        label-width="9rem"
        placeholder="助力时间单位为小时"
        v-if="form.is_time"
      />
    </div>

    <div class="base-info padding-lr margT-l">
      <!-- <div class="color-s margT-s tip4help">奖品图片</div> prizeList-->
      <van-field label="奖品设定" required label-width="100%" readonly />
      <div class="prizeBoxBox">
        <div class="prizeBox" v-for="(item, index) in prizeList" :key="index">
          <span
            class="close-icon"
            :style="{ backgroundColor: '#FF0000' }"
            @click="deleteBtn(item, index)"
            ><van-icon color="white" name="cross"
          /></span>

          <van-field
            label="奖项(可设置一等奖等)"
            @blur="changeprizeItem(item, index)"
            required
            v-model="item.prize_name"
            input-align="right"
            clearable
            label-width="15rem"
            placeholder="请填写奖项"
          />

          <van-field
            label="奖品名称"
            @blur="changeprizeItem(item, index)"
            required
            v-model="item.name"
            input-align="right"
            clearable
            label-width="10rem"
            placeholder="请填写奖品名称"
          />
          <van-field
            label="奖品数量"
            @blur="changeprizeItem(item, index)"
            required
            v-model="item.nums"
            input-align="right"
            clearable
            label-width="10rem"
            placeholder="请填写数字"
          />

          <van-field
            label="助力次数(达到助力数可获取奖品)"
            @blur="changeprizeItem(item, index)"
            required
            v-model="item.power_nums"
            input-align="right"
            clearable
            label-width="21rem"
            placeholder="请填写数字"
          />

          <van-field
            label="奖品类型"
            @click="changeprizeType(index)"
            v-model="item.prize_type_name"
            input-align="right"
            required
            readonly
            clearable
            label-width="10rem"
            placeholder="请选择奖品类型"
          />

          <van-field
            label="奖品图片(建议上传比例为4:3的图片)"
            input-align="right"
            label-width="60%"
            @click="clickUploader(index)"
          >
            <template #input>
              <!-- //(file,item,index) -->
              <van-uploader
                v-model="item.picture"
                max-count="1"
                :after-read="afterRead4prize"
              />
            </template>
          </van-field>

          <!-- <div class="label">奖品图片 <span class="tip fs-12 color-s">建议上传比例为4:3的图片</span></div>
                <div class="my-img">
                    <van-image :src="item.picture" fit="scale-down"/>
                    <span class="change-pic" @click="changePic4prize(index)">更换图片</span>
                    <input
                        type="file"
                        class="file-input d-none"
                        :ref="`prizePic${index}`"
                        @change="handleFileChange4prize"
                    >
                </div> -->
        </div>
      </div>

      <div class="btnAddSomeBox margT-l">
        <div class="addSome">
          <van-button size="small" type="default" block @click="addPrizeBtn"
            >添加了{{ prizeNum }}种奖品</van-button
          >
        </div>
      </div>
      <van-action-sheet
        v-model="showAction"
        :actions="actions"
        @select="onSelect"
      />
    </div>

    <div class="introduce padding-all-l margT-l">
      <h2 class="introduce-title">报名表单</h2>
      <div class="color-s margT-s">报名表单可在后台管理系统中自定义</div>
      <div class="margT-l" v-if="form.create_form">
        <!-- <k-form-build ref="kfb" :value="form.create_form" /> -->
        <van-field
          required
          v-for="(item, index) in form.create_form.list"
          :key="index"
          :label="item.label"
          disabled
          :placeholder="item.options.placeholder"
          input-align="right"
        />
      </div>
      <!-- <button @click="handleGetData">获取数据</button> -->
    </div>

    <protocol-title
      @protocolClick="protocolClick"
      @radioClick="radioClick"
    ></protocol-title>

    <protocol-text
      v-if="protocolShow"
      :protocolShow="protocolShow"
      @iconClick="iconClick"
      :btn_color="$store.getters.getMasterColor"
      :theme_color="form.theme_color"
    ></protocol-text>

    <div class="tabbar-height"></div>
    <van-popup v-model:show="showStartTimePopup" position="bottom">
      <van-datetime-picker
        v-model="start_time"
        id="start_time"
        type="datetime"
        title="选择完整时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="startTimeConfirm"
        active-class="active-style"
      />
    </van-popup>
    <van-popup v-model:show="showEndTimePopup" position="bottom">
      <van-datetime-picker
        v-model="end_time"
        id="end_time"
        type="datetime"
        title="选择完整时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="endTimeConfirm"
        active-class="active-style"
      />
    </van-popup>

    <!-- <van-popup v-model:show="showStartTimePopup" position="bottom">
      <van-datetime-picker
        v-model="start_time"
        id="start_time"
        type="datetime"
        title="选择完整时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="startTimeConfirm1"
        active-class="active-style"
      />
    </van-popup>
    <van-popup v-model:show="showEndTimePopup" position="bottom">
      <van-datetime-picker
        v-model="end_time"
        id="end_time"
        type="datetime"
        title="选择完整时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="endTimeConfirm1"
        active-class="active-style"
      />
    </van-popup> -->
    <div class="fix-bottom padding-lr">
      <van-button
        :color="$store.getters.getMasterColor"
        block
        @click="submit"
        >{{ is_edit == 0 ? "发布活动" : "保存修改" }}</van-button
      >
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Dialog, Toast, RadioGroup, Radio } from "vant";
import { Image as VanImage } from "vant";
import MyText from "@/components/MyText";
import MyImg from "@/components/MyImg";
// import utils from '@/assets/js/utils.js'
import { myMixins } from "@/assets/js/mixins.js";
import ProtocolTitle from "@/components/ProtocolTitle";
import ProtocolText from "@/components/ProtocolText";
// import { quillEditor } from 'vue-quill-editor'
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
// const formatDate = (date) => `${date.getFullYear()}-${(date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):date.getMonth() + 1}-${(date.getDate())<10?'0'+(date.getDate()):date.getDate()} ${(date.getHours())<10?'0'+(date.getHours()):date.getHours()}:${(date.getMinutes())<10?'0'+(date.getMinutes()):date.getMinutes()}`;
export default {
  name: "ApplyActivity",
  mixins: [myMixins],
  components: {
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    VanImage,
    MyText,
    MyImg,
    ProtocolTitle,
    ProtocolText,
    // quillEditor
  },
  data() {
    return {
      showStartTimePopup: false,
      showEndTimePopup: false,
      name: "满天星",
      pattern: /\d{6}/,
      start_time: new Date(),
      end_time: new Date(),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2028, 10, 1),
      case_id: "",
      protocolText: "",
      form: {
        title: "",
        apply_charge: "",
        cover:
          "http://youmihuodongbao.oss-cn-hangzhou.aliyuncs.com/UMI_20210805175222_581670674cd8421340c375ec5be8af5d.jpeg",
        start_time: this.$utils
          .formatDateYMDHM(new Date(new Date().getTime()))
          .toString(),
        end_time: this.$utils
          .formatDateYMDHM(new Date(new Date().getTime() + 86400000 * 7))
          .toString(),
        introduce: [],
        create_form: "" || this.$store.state.create_form,
        shareimg:
          "http://youmihuodongbao.oss-cn-hangzhou.aliyuncs.com/UMI_20210805175222_581670674cd8421340c375ec5be8af5d.jpeg",
        share_describe: "",
        sharetitle: "",
        // helps: "",
        // day_prize_nums: "",
        // day_act_nums: "",
        // day_help_nums: "",
        theme_color: "#ff7200",
        btn_color: "#ff7200",
        music: "",
        musicName: "",
        model: "" || this.$route.query.model,
        price: null,
        active_price: null,
        goods_num: null,
        // withdrawal_price: null,
        active_title: "",
        // helps_buy: null,
        commodity_type: null,
        // distribution_status: "1",
        // distribution_money_one: null,
        // distribution_money_two: null,
        // is_distribution_ranking: false,
        is_refund: false,
        is_helps: false,
        is_time: true,
        bargain_time: null,
        is_plays: true,
        // starttime: this.$utils
        //   .formatDateYMDHM(new Date(new Date().getTime()))
        //   .toString(),
        // endtime: this.$utils
        //   .formatDateYMDHM(new Date(new Date().getTime() + 86400000 * 7))
        //   .toString(),
        init_help_nums: null,
        part_help_nums: null,
        is_links: false,
        link_title: "",
        upimg: [],
        // is_withdrawal: false,
        // is_openlottery: false,
        prizes: [],
      },
      showAction: false,
      actions: [
        { name: "自提", id: 1 },
        { name: "快递", id: 2 },
      ],
      switchChecked: false,
      editorOption: {
        placeholder: "请在这里输入内容",
        modules: {
          toolbar: [[{ size: ["small", false, "large", "huge"] }]],
        },
      },
      textNum: 0,
      imgNum: 0,
      prizeNum: 0,
      is_edit: 0,
      jsonData: {},
      openid: "",
      prizeList: [],
      formrankingShow: false,
      // 一级分销隐藏
      moneyoneShow: false,
      // 二级分销隐藏
      moneytwoShow: false,
      protocolShow: false,
      radioChecked: false,
      showMusic: false,
      musicList: [],
      merchant_id: null
    };
  },
  created() {
    this.getMusicPage();
  },
  mounted() {
    // this.getTypeNum(this.form.introduce)
    if (process.env.NODE_ENV == "production") {
      //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到";
      this.getItemopenid(this.openid)
      // let params = {
      //   openid: this.openid,
      // };
      // this.$request.getItemopenid(params).then((res) => {
      //   // alert(JSON.stringify(res.data))
      //   if (res.data.ret == 400) {
      //     Dialog.alert({
      //       title: "系统提示",
      //       message: "请先去添加商户！",
      //       showCancelButton: true,
      //     }).then(() => {
      //       // on close
      //       this.$router.push("/merchant");
      //     });
      //   } else {
      //     this.merchant_id = res.data.data.id 
      //     // alert(res.data.data.id)
      //   }
      // });
    } else {
      this.openid = this.$store.state.openid;
      // let params = {
      //   openid: this.openid,
      // };
      // this.$request.getItemopenid(params).then((res) => {
      //   if (res.data.ret == 400) {
      //     Dialog.alert({
      //       title: "系统提示",
      //       message: "请先去添加商户！",
      //       showCancelButton: true,
      //     }).then(() => {
      //       // on close
      //       this.$router.push("/merchant");
      //     });
      //   } else {
      //     this.merchant_id = res.data.data.id 
      //   }
      // });
    }
    // this.openid = this.$store.state.openid;
    // let params ={
    //   openid: this.openid
    // }
    // this.$request.Itemopenid(params).then(res => {
    //   console.log(res);
    // })
    this.getActivityItem();
    this.is_edit = this.$route.query.is_edit;
    this.case_id = this.$route.query.case_id;
    // this.toHome()
    this.configItemShare();
  },
  methods: {
    changeMusic() {
      this.showMusic = true;
    },
    // 获取音乐数据
    getMusicPage() {
      this.$request.getMusicPage().then((res) => {
        this.musicList = res.data.data;
      });
    },
    onMusic(value) {
      this.showMusic = false;
      this.form.musicName = value.name;
      this.form.music = value.url;
    },
    // 选择框
    radioClick(value) {
      this.radioChecked = value;
    },
    // 点击活动跳转
    protocolClick() {
      this.protocolShow = true;
    },
    iconClick() {
      this.protocolShow = false;
    },
    // 更改颜色
    headleChangeColor(value) {
      this.form.theme_color = value;
    },
    // 更改按钮颜色
    headleChangebtnColor(value) {
      this.form.btn_color = value;
    },
    // 获取订单状态
    orderChange(value) {
      console.log(value, "value");
      this.form.commodity_type = value;
    },
    // 控制助力时间
    changeItem(value) {
      this.form.is_time = value;
      if (value == false) {
        this.form.bargain_time = null;
      }
    },
    // 控制弹窗
    changeLinks(value) {
      this.form.is_links = value;
      if (value == false) {
        this.form.link_title = "";
        this.form.upimg = [];
      }
    },
    changePlays(value) {
      this.form.is_plays = value;
      if (value == false) {
        this.form.active_price = null;
        this.form.price = null;
        this.form.goods_num = null;
      }
    },
    // 获取分销状态
    // butionChange(value) {
    //   console.log(value, "value");
    //   this.form.distribution_status = value;
    // },
    // 点击关闭分销
    // fuoneClick(value) {
    //   this.moneyoneShow = false;
    //   this.moneytwoShow = false;
    //   this.form.distribution_money_one = null;
    //   this.form.distribution_money_two = null;
    // },
    // 显示一级分销
    // oneClick() {
    //   this.moneyoneShow = true;
    //   this.moneytwoShow = false;
    // },
    // 显示二级分销
    // twoClick() {
    //   this.moneyoneShow = true;
    //   this.moneytwoShow = true;
    // },
    // 控制抽奖模块
    // changeOpenlottery(value) {
    //   console.log(value);
    //   if(value == false) {
    //     this.prizeList = []
    //     this.form.helps = ""
    //     this.form.day_prize_nums = ""
    //     this.form.day_act_nums = ""
    //     this.form.day_help_nums = ""
    //     // console.log(this.prizeList, 'this.form.prizes');
    //     this.form.is_openlottery = false
    //   } else {
    //     this.form.is_openlottery = true;
    //   }
    // },
    changeprizeType(index) {
      this.showAction = true;
      this.prizeIndex = index;
    },
    changeprizeItem(item, index) {
      this.prizeList[index] = item;
      console.log("this.prizeList_changeprizeItem", this.prizeList);
    },
    deleteBtn(thisItem) {
      // console.log("prize_id", thisItem.prize_id)
      // this.prizeList = this.prizeList.filter(item => {
      //   return item.prize_id != thisItem.prize_id
      // })
      // this.prizeNum = this.prizeList.length
      // console.log("this.prizeList",this.prizeList)
      Dialog.confirm({
        title: "温馨提示",
        message: "确定要删除次奖品信息吗？",
      })
        .then(() => {
          let list = [];
          this.prizeList.forEach((item) => {
            if (item.id != thisItem.id) {
              list.push(item);
            }
          });
          this.prizeList = list;
          // on confirm
          // const toast = Toast.loading({
          //   forbidClick: true,
          //   message: "删除中...",
          // });
          // this.$request.PrizeDel({ id: thisItem.prize_id }).then((res) => {
          //   if (res.ret == 200) {
          //     this.getActivityItem();
          //     toast.clear();
          //   } else {
          //     Toast(res.msg);
          //   }
          // });
        })
        .catch(() => {
          // on cancel
        });
    },
    clickUploader(index) {
      this.prizeIndex = index;
      console.log("clickuploader", index);
    },
    afterRead4prize(file) {
      console.log("file", file);
      const _this = this;
      const img = file.file; // e.target.files[0];
      console.log("img", img);
      if (
        img.type != "image/jpeg" &&
        img.type != "image/png" &&
        img.type != "image/gif"
      ) {
        Toast("请上传jpg或png格式的图片");
        return false;
      }
      if (img.size > 2000 * 1024) {
        Toast("图片大小请不要超过2M");
        return;
      }
      this.$utils.blobToDataURL(img, (base64Url) => {
        let formData = new FormData();
        formData.append("file", img);
        console.log("formData", formData);
        _this.$request.uploadPic(formData).then((res) => {
          console.log("uploadPic_res", res);
          // _this.prizeList[_this.prizeIndex].picture = res.data.url
          _this.prizeList[_this.prizeIndex].picture[0].url = res.data.url;
          console.log("_this.prizeList", _this.prizeList);
        });
      });
    },
    getPrizePage(activity_id) {
      const params = {
        activity_id,
        openid: this.openid,
      };
      this.$request.PrizePage(params).then((res) => {
        if (res.ret == 200) {
          let prizeList = res.data.data;
          prizeList = prizeList.map((item) => {
            const pic = item.picture;
            item.picture = [
              {
                url: pic,
                // url:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/8c4fd81a-cab4-4a67-a7fc-777b49136f0f.png'
              },
            ];
            return item;
          });
          this.prizeList = prizeList;
          console.log("this.prizeList", this.prizeList);
        } else {
          Dialog.alert({
            title: "系统提示",
            message: res.msg,
          }).then(() => {
            // on close
          });
        }
      });
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.showAction = false;
      console.log("item", item);
      this.prizeList[this.prizeIndex].prize_type = item.id;
      this.prizeList[this.prizeIndex].prize_type_name = item.name;

      console.log(
        "this.prizeList[this.prizeIndex].prize_type",
        this.prizeList[this.prizeIndex].prize_type
      );
    },
    changeSwitch(value) {
      console.log("value", value);
      this.switchChecked = value;
    },
    handleGetData() {
      // 使用getData函数获取数据
      this.$refs.kfb
        .getData()
        .then((values) => {
          console.log("验证通过", values);
        })
        .catch(() => {
          console.log("验证未通过，获取失败");
        });
    },
    changePic() {
      this.$refs.fileInput.click();
    },
    changePic4shareimg() {
      this.$refs.fileInput4shareimg.click();
    },
    changePic4prize(index) {
      this.prizeIndex = index;
      console.log("this.$refs.prizePic", this.$refs[`prizePic${index}`]);
      this.$refs[`prizePic${index}`].click();
    },
    addPicBtn() {
      this.$refs.addPicInput.click();
    },
    addPicInputChange(e) {
      const _this = this;
      const img = e.target.files[0];
      if (img.type != "image/jpeg" && img.type != "image/png") {
        Toast("请上传jpg或png格式的图片");
        return false;
      }
      if (img.size > 2000 * 1024) {
        Toast("图片大小请不要超过2M");
        return;
      }
      this.$utils.blobToDataURL(img, (base64Url) => {
        let formData = new FormData();
        formData.append("file", img);
        console.log("formData", formData);
        this.$request.uploadPic(formData).then((res) => {
          console.log("res", res);
          let introduce = this.form.introduce;
          introduce.push({
            id:
              Number(
                introduce[introduce.length - 1] &&
                  introduce[introduce.length - 1].id
              ) + 1 || 1,
            type: "img",
            value: res.data.url,
          });
          this.form.introduce = introduce;
          this.getTypeNum(this.form.introduce);
        });
      });
      // utils.blobToDataURL(img, (base64Url) => {
      //   let introduce = this.form.introduce
      //   introduce.push({
      //     id: (Number(introduce[introduce.length-1] && introduce[introduce.length-1].id)+1) || 1,
      //     type:"img",
      //     value: base64Url
      //   })
      //   this.form.introduce = introduce
      //   this.getTypeNum(this.form.introduce)
      // });
    },
    handleFileChange4shareimg(e) {
      const _this = this;
      const img = e.target.files[0];
      if (
        img.type != "image/jpeg" &&
        img.type != "image/png" &&
        img.type != "image/gif"
      ) {
        Toast("请上传jpg或png格式的图片");
        return false;
      }
      if (img.size > 2000 * 1024) {
        Toast("图片大小请不要超过2M");
        return;
      }
      this.$utils.blobToDataURL(img, (base64Url) => {
        let formData = new FormData();
        formData.append("file", img);
        console.log("formData", formData);
        _this.$request.uploadPic(formData).then((res) => {
          console.log("res", res);
          _this.form.shareimg = res.data.url;
          console.log("_this.form.shareimg", _this.form.shareimg);
        });
      });
    },
    handleFileChange4prize(e) {
      const _this = this;
      const img = e.target.files[0];
      if (
        img.type != "image/jpeg" &&
        img.type != "image/png" &&
        img.type != "image/gif"
      ) {
        Toast("请上传jpg或png格式的图片");
        return false;
      }
      if (img.size > 2000 * 1024) {
        Toast("图片大小请不要超过2M");
        return;
      }
      this.$utils.blobToDataURL(img, (base64Url) => {
        let formData = new FormData();
        formData.append("file", img);
        console.log("formData", formData);
        _this.$request.uploadPic(formData).then((res) => {
          console.log("res", res);
          _this.prizeList[_this.prizeIndex].picture = res.data.url;
          // _this.prizeList[_this.prizeIndex].picture[0].url = res.data.url
          console.log("_this.prizeList", _this.prizeList);
        });
      });
    },
    handleFileChange(e) {
      const _this = this;
      console.log("e", e);
      const img = e.target.files[0];
      if (
        img.type != "image/jpeg" &&
        img.type != "image/png" &&
        img.type != "image/gif"
      ) {
        Toast("请上传jpg或png格式的图片");
        return false;
      }
      if (img.size > 3000 * 1024) {
        Toast("图片大小请不要超过3M");
        return;
      }
      this.$utils.blobToDataURL(img, (base64Url) => {
        let formData = new FormData();
        formData.append("file", img);
        console.log("formData", formData);
        _this.$request.uploadPic(formData).then((res) => {
          console.log("res", res);
          _this.form.cover = res.data.url;
          console.log("_this.form.cover", _this.form.cover);
        });
      });
      // utils.blobToDataURL(img, (base64Url) => {
      //   _this.form.cover = base64Url
      //   console.log("_this.form.cover",_this.form.cover)
      // });
    },
    submit() {
      const form = this.form;
      const prizeList = this.prizeList;
      let list = prizeList;
      //判断奖品数量是否在5~8个之间
      // if(!this.form.is_openlottery || (this.prizeNum >= 5 && this.prizeNum <= 8)) {

      // } else {
      //   Dialog.alert({
      //     title: "温馨提示",
      //     message: "奖品数量需控制在5~8个之间",
      //   }).then(() => {
      //     // on close
      //     return;
      //   });
      //   return;
      // }
      if (this.radioChecked != true) {
        Dialog.alert({
          title: "温馨提示",
          message: "请同意用户协议",
        }).then(() => {
          // on close
          return;
        });
        return;
      }
      console.log("prizeList_s", prizeList);
      list = list.map((item, index) => {
        console.log("item_index", index);
        const it = item;
        // console.log(it, 'it');
        item.picture = it.picture[0].url;
        //   item.sort = index+1
        return item;
      });
      //  alert(this.merchant_id)
      console.log("prizeList_e", list);
      let params = {
        openid: this.openid,
        title: form.title,
        cover: form.cover,
        start_time: form.start_time,
        end_time: form.end_time,
        introduce: JSON.stringify(form.introduce),
        create_form: JSON.stringify(form.create_form),
        sharetitle: form.sharetitle,
        shareimg: form.shareimg,
        share_describe: form.share_describe,
        model: form.model,
        theme_color: form.theme_color,
        btn_color: form.btn_color,
        music: form.music,
        case_id: this.case_id,
        val: JSON.stringify({
          price: this.form.price,
          active_price: this.form.active_price,
          goods_num: this.form.goods_num,
          active_title: this.form.active_title,
          commodity_type: this.form.commodity_type,
          is_refund: this.form.is_refund,
          is_helps: this.form.is_helps,
          // starttime: this.form.starttime,
          bargain_time: this.form.bargain_time,
          is_time: this.form.is_time,
          init_help_nums: this.form.init_help_nums,
          part_help_nums: this.form.part_help_nums,
          is_plays: this.form.is_plays,
          is_links: this.form.is_links,
          link_title: this.form.link_title,
          upimg: this.form.upimg == 0 ? [] : this.form.upimg[0].url,
          // helps: this.form.helps,
          // day_prize_nums: this.form.day_prize_nums,
          // day_act_nums: this.form.day_act_nums,
          // day_help_nums: this.form.day_help_nums,s
          // withdrawal_price: this.form.withdrawal_price,
          // helps_buy: this.form.helps_buy,
          // distribution_status: this.form.distribution_status,
          // distribution_money_one:  this.form.distribution_money_one,
          // distribution_money_two: this.form.distribution_money_two,
          // is_distribution_ranking:  this.form.is_distribution_ranking,
          // is_withdrawal: this.form.is_withdrawal,
          // is_openlottery:  this.form.is_openlottery,
        }),
        // JSON.stringify
        prizes: list,
        merchant_id: localStorage.getItem('merchant_id')
        // activity_type:1 // 没用了的字段
      };
      // const validateParams = params;
      // delete validateParams.music;
      // if (this.$utils.hasNull(validateParams)) {
      //   Toast(`请填写完整信息`);
      //   return;
      // }
      // alert(this.merchant_id)
      if (this.case_id) params.case_id = this.case_id;
      if (this.is_edit == 1) params.id = form.id;
      this.$request.SaveActPrize(params).then((res) => {
        if (res.ret == 200) {
          Toast("操作成功");
          this.$router.replace("/manage");
        } else {
          Dialog.alert({
            title: "系统提示",
            message: res.msg.slice(5),
          }).then(() => {
            // on close
          });
        }
      });
    },
    getActivityItem() {
      if (this.$route.query.model) return;
      let params = {
        id: Number(this.$route.params.id),
      };
      this.$request.getActivityItem(params).then((res) => {
        let data = res.data;
        this.form.music = data.music;
        this.musicList.forEach((item) => {
          if (item.url == data.music) {
            return (this.form.musicName = item.name);
          }
        });
        this.form.id = data.id;
        this.form.title = data.title;
        (this.form.cover = data.cover),
          (this.form.is_need_pay = data.is_need_pay == 1 ? true : false),
          (this.switchChecked = data.is_need_pay == 1 ? true : false),
          (this.form.apply_charge =
            data.apply_charge > 0.0 ? data.apply_charge : "");
        this.form.introduce = data.introduce;
        console.log("data.start_time", data.start_time);
        this.form.start_time = this.$utils.parseToDateYMDHM(data.start_time); // 开始时间
        this.start_time = this.$utils.parseToDateYMDHM(data.start_time); // 开始时间
        this.start_time = new Date(this.start_time);
        console.log("===this.start_time===", this.start_time);
        this.form.end_time = this.$utils.parseToDateYMDHM(data.end_time); // 结束时间
        this.end_time = this.$utils.parseToDateYMDHM(data.end_time); // 结束时间
        this.end_time = new Date(this.end_time);

        this.form.create_form = data.create_form;
        this.form.sharetitle = data.sharetitle;
        this.form.shareimg = data.shareimg;
        this.form.share_describe = data.share_describe;
        this.form.theme_color = data.theme_color;
        this.form.btn_color = data.btn_color;

        this.form.model = data.model;
        console.log(data, "datadata");
        const val = data.val;

        this.protocolText = val.protocolText;
        this.form.price = val.price;
        this.form.active_price = val.active_price;
        this.form.goods_num = val.goods_num;
        this.form.active_title = val.active_title;
        this.form.commodity_type = String(val.commodity_type);
        this.form.is_refund = val.is_refund;
        this.form.is_helps = val.is_helps;
        this.form.is_time = val.is_time;
        this.form.bargain_time = val.bargain_time;
        this.form.init_help_nums = val.init_help_nums;
        this.form.part_help_nums = val.part_help_nums;
        // this.form.starttime = this.$utils.parseToDateYMDHM(val.starttime); // 开始时间
        // this.form.endtime = this.$utils.parseToDateYMDHM(val.endtime); // 结束时间
        this.form.is_plays = val.is_plays;
        this.form.is_links = val.is_links;
        this.form.link_title = val.link_title;
        this.form.upimg = [
          {
            url: val.upimg,
          },
        ];
        // this.form.helps = val.helps;
        // this.form.day_prize_nums = val.day_prize_nums;
        // this.form.day_act_nums = val.day_act_nums;
        // this.form.day_help_nums = val.day_help_nums;
        // this.form.withdrawal_price = val.withdrawal_price
        // this.form.helps_buy = val.helps_buy;
        // this.form.distribution_status = String(val.distribution_status);
        // this.form.distribution_money_one = val.distribution_money_one;
        // this.form.distribution_money_two = val.distribution_money_two;
        // this.form.is_distribution_ranking = val.is_distribution_ranking;
        // this.form.is_withdrawal = val.is_withdrawal;
        // this.form.is_openlottery = val.is_openlottery;
        if (this.form.distribution_money_one) {
          this.moneyoneShow = true;
        }
        if (this.form.distribution_money_two) {
          this.moneytwoShow = true;
        }
        console.log(this.form.commodity_type, this.form.distribution_status);
        //其他字段
        this.form.merchant_id = localStorage.getItem("merchant_id");

        let prizeList = data.prizes;
        console.log("___prizeList", prizeList);
        prizeList = prizeList.map((item) => {
          const pic = item.picture;
          item.picture = [
            {
              url: pic,
              // url:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/8c4fd81a-cab4-4a67-a7fc-777b49136f0f.png'
            },
          ];
          return item;
        });
        this.prizeList = prizeList;
        this.prizeNum = this.prizeList.length;
        console.log("this.prizeList", this.prizeList);

        console.log("this.form", this.form);
        this.$forceUpdate();
        this.getTypeNum(this.form.introduce);
        console.log("getPrizePage");
        // this.getPrizePage(this.form.id)
      });
    },
    addPrizeBtn() {
      let prize = this.prizeList || [];
      prize.push({
        id:
          Number(prize[prize.length - 1] && prize[prize.length - 1].id) + 1 ||
          1,
        name: "",
        nums: "",
        prize_name: "",
        power_nums: "",
        // probability: "",
        prize_type_name: "",
        sort: prize.length + 1,
        picture: [
          {
            url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/04357b58-d4f2-4e71-b8a5-c21667f70a39.jpg",
          },
        ],
        // picture:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/8c4fd81a-cab4-4a67-a7fc-777b49136f0f.png'
      });
      this.prizeList = prize;
      console.log("this.form.prize", this.form.prize);
      this.prizeNum = this.prizeList.length;
      //   this.getTypeNum(this.form.prize)
    },
    addTextBtn() {
      let introduce = this.form.introduce || [];
      introduce.push({
        id:
          Number(
            introduce[introduce.length - 1] &&
              introduce[introduce.length - 1].id
          ) + 1 || 1,
        type: "text",
        value: "",
      });
      this.form.introduce = introduce;
      this.getTypeNum(this.form.introduce);
    },
    // 统计富文本框和图片的个数
    getTypeNum(arr) {
      this.textNum = 0;
      this.imgNum = 0;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].type === "text" && arr[i].value) {
          this.textNum++;
        } else if (arr[i].type === "img" && arr[i].value) {
          this.imgNum++;
        }
      }
    },
    // 上移
    upIntroduceItem(index) {
      console.log("upIntroduceItem", this.index);
      let introduce = this.form.introduce;
      console.log("introduce[index - 1]", introduce[index - 1]);
      if (introduce[index - 1]) {
        const type = introduce[index - 1].type;
        const value = introduce[index - 1].value;
        introduce[index - 1].type = introduce[index].type;
        introduce[index - 1].value = introduce[index].value;
        introduce[index].type = type;
        introduce[index].value = value;
        this.form.introduce = introduce;
      } else {
        Toast("已在最后面");
      }
    },
    // 下移
    downIntroduceItem(index) {
      console.log("downIntroduceItem", this.index);
      let introduce = this.form.introduce;
      console.log("introduce[index + 1]", introduce[index + 1]);
      if (introduce[index + 1]) {
        const type = introduce[index + 1].type;
        const value = introduce[index + 1].value;
        introduce[index + 1].type = introduce[index].type;
        introduce[index + 1].value = introduce[index].value;
        introduce[index].type = type;
        introduce[index].value = value;
        this.form.introduce = introduce;
      } else {
        Toast("已在最前面");
      }
    },
    deleteIntroduceItem(id) {
      let introduce = this.form.introduce;
      if (introduce.length <= 1) {
        Toast("活动介绍不能为空");
        return;
      }
      this.form.introduce = introduce.filter((item) => {
        return item.id != id;
      });
      this.getTypeNum(this.form.introduce);
      // introduce.splice(index,1)
      // this.form.introduce = introduce
    },
    onEditorChange(value) {
      console.log(value);
    },
    ChangeFile(item) {
      let introduce = this.form.introduce;
      let newIntroduce = introduce.map((i) => {
        if (i.id == item.id) {
          i.value = item.value;
        }
        return i;
      });
      this.form.introduce = newIntroduce;
    },
    editorHtmlChange(item) {
      let introduce = this.form.introduce;
      let newIntroduce = introduce.map((i) => {
        if (i.id == item.id) {
          i.value = item.value;
        }
        return i;
      });
      this.form.introduce = newIntroduce;
    },
    startTimeConfirm(value) {
      this.showStartTimePopup = false;
      this.form.start_time = this.$utils.parseToDateYMDHM(value);
      this.start_time = this.$utils.parseToDateYMDHM(value);
      console.log("this.start_time", this.start_time);
    },
    endTimeConfirm(value) {
      this.showEndTimePopup = false;
      this.form.end_time = this.$utils.parseToDateYMDHM(value);
      this.end_time = this.$utils.parseToDateYMDHM(value);
    },
    startTimeConfirm1(value) {
      this.showStartTimePopup = false;
      this.form.starttime = this.$utils.parseToDateYMDHM(value);
      console.log("this.start_time", this.start_time);
    },
    endTimeConfirm1(value) {
      this.showEndTimePopup = false;
      this.form.endtime = this.$utils.parseToDateYMDHM(value);
    },
    onOversize(file) {
      console.log("file", file);
      console.log("文件大小不能超过 1M");
    },
    afterRead(value) {
      console.log("file.value", value);
      // this.form.cover = value.content
    },
    beforeRead(file) {
      if (file.type != "image/jpeg" && file.type != "image/png") {
        Toast("请上传jpg或png格式的图片");
        return false;
      }
      return true;
    },
    afterRead4prize1(file) {
      console.log("file", file);
      const _this = this;
      const img = file.file; // e.target.files[0];
      console.log("img", img);
      if (
        img.type != "image/jpeg" &&
        img.type != "image/png" &&
        img.type != "image/gif"
      ) {
        Toast("请上传jpg或png格式的图片");
        return false;
      }
      if (img.size > 2000 * 1024) {
        Toast("图片大小请不要超过2M");
        return;
      }
      this.$utils.blobToDataURL(img, (base64Url) => {
        let formData = new FormData();
        formData.append("file", img);
        console.log("formData", formData);
        _this.$request.uploadPic(formData).then((res) => {
          console.log("uploadPic_res", res);
          // _this.prizeList[_this.prizeIndex].picture = res.data.url
          _this.form.upimg[0].url = res.data.url;
        });
      });
    },
  },
};
</script>
